<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.top_context {
				height: 200px;
				background: #e0e0e0;
				text-height: center;
				line-height: 200px;
			}

			/* 吸顶灯内容元素初始效果 */
			.sticky_element {
				height: 50px;
				text-align: center;
				background-color: #000000;
				line-height: 50px;
				color: #fff;
			}

			/* 页面主体区域 */
			.main_context {
				height: 8000px;
				background-color: #e0e0e0;
			}

			/* 切换样式：吸顶灯卡页面顶部 */
			.sticky {
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>

	</head>
	<body>
		<!-- 顶部内容：导航 -->
		<div class="top_context">顶部内容区域</div>
		<!-- 吸顶灯内容 -->
		<div class="sticky_element">我是吸顶元素</div>

		<div class="main_context">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum a nisi iusto
			blanditiis,
			doloribus voluptas ipsam, ut, placeat fugit excepturi eligendi. Magnam, neque. Quibusdam praesentium,
			possimus eius nemo cupiditate rerum.
		</div>
		<script>
			//ready()事件源语法： $(document).ready(function(){});
			//            简写：$(function)(){});
			//  总结：页面元素全部加载完毕，在执行JQ相关操作
			//  script元素放在body位置【可不写】

			//吸顶灯效果---【了解】BOM案例：浏览器6个对象的方法使用
			//思路：1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
			//     2.页面顶部到吸顶灯位置：200px，大于200px
			//     3.追加第一个样式：固定定位，页面顶部位置

			//    1.追加样式：吸顶灯卡在页面顶部
			//    2.固定值：页面顶部到吸顶灯位置
			//    3.固定值>滚动值，滚动范围超过200px 实现切换

			//固定值：页面顶部到吸顶灯位置--BOM语法
			//offset()   获取或者设置元素相对于文档偏移量
			//offest().top  从顶部到吸顶灯元素的偏移量
			var se = $(".sticky_element").offset().top;


			//滚动值：BOM对象+事件源
			//$(window) 抓取页面window对象，监听窗口事件：窗口改变、滚动
			//理解：实时抓取页面滚动值
			$(window).scroll(function() {
				//滚动值：获取页面滚动位置
				//scrolltop()获取页面滚动垂直距离
				var st = $(window).scrollTop();

				//判断  滚动值大于固定值，滚动超过200，实现切换：吸顶效果
				if (st > se) {
					//条件成立：大于200px    切换吸顶效果
					$(".sticky_element").addClass("sticky");
				} else {
					//条件不成立：小于200px
					$(".sticky_element").removeClass("sticky");
				}
			});
		</script>
	</body>
</html>